<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.js"></script>
    <script src="./js/api.js"></script>
    <script>
        // HTTP协议中
        //  1、URL地址栏参数：(GET……) 被叫做 Query String parameters
        //          + 在请求地址后面以 ? 方式描述后续字符串为请求查询参数
        //          + 多个参数以 & 方式进行连接
        //          + 参数以 key=value 进行进行构成，其中 key 为参数名称 value 为参数值
        console.log(api);

        function loadFilmDetail(){
            api.loadFilmById()
               .then(function( data ){
                    // console.log(data);
                    // 数据状态判断
                    if(!data.resultState){
                        alert(codeText[data.msg])
                        return;
                    }
                    // 后续的数据的渲染操作
                    // JSON.stringify(目标数据,额外配置,格式化方式);
                    document.querySelector("#result").innerHTML = JSON.stringify(data,{},"    ");
               })
               .catch(function(error){
                   console.log(error);
               })
        }

        function loadFilmDetail2(filmId){
            api.loadFilmById2(filmId)
               .then(function( data ){
                    if(!data.resultState){
                        alert(codeText[data.msg])
                        return;
                    }
                    document.querySelector("#result").innerHTML = JSON.stringify(data,{},"    ");
               })
               .catch(function(error){
                   console.log(error);
               })
        }

        function loadFilmList(){
            api.loadFilmList()
               .then(function( data ){
                    if(!data.resultState){
                        alert(codeText[data.msg])
                        return;
                    }
                    document.querySelector("#result").innerHTML = JSON.stringify(data,{},"    ");
               })
               .catch(function(error){
                   console.log(error);
               })
        }

        function loadFilmListByParams(){
            api.loadFilmList({
                size:2,
                no:2
            }).then(function( data ){
                if(!data.resultState){
                    alert(codeText[data.msg])
                    return;
                }
                document.querySelector("#result").innerHTML = JSON.stringify(data,{},"    ");
            })
            .catch(function(error){
                console.log(error);
            })
        }
    </script>
</head>
<body>
    <input type="button" value="请求电影详情" onclick="loadFilmDetail()"><br><br>
    <input type="button" value="查询26636712电影" onclick="loadFilmDetail2('26636712')"><br><br>
    <input type="button" value="查询30238932电影" onclick="loadFilmDetail2('30238932')"><br><br>
    <input type="button" value="无参数查询电影列表" onclick="loadFilmList()"><br><br>
    <input type="button" value="提供参数查询" onclick="loadFilmListByParams()"><br><br>

    <pre style="font-size: 20px;" id="result"></pre>
</body>
</html>